import './style/index.css';
import React from 'react';
import { observer } from 'mobx-react';
import { WeaMind, WeaLocaleProvider } from "ecCom";
import { Button, Spin, Icon, Tooltip, Row, Col } from 'antd';
const ButtonGroup = Button.Group;
const getLabel = WeaLocaleProvider.getLabel;

@observer
class GovernMind extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            winWidth: document.body.offsetWidth,
            winHeight: document.body.offsetHeight,
        }
        this.forwardQueryResult = this.forwardQueryResult.bind(this);
    }

    componentDidMount() {
        const { governMindStore, id, governAnalysisStore, mindComing } = this.props;
        //const {id} = this.props.location.query;
        const { init, initMap, loaded } = governMindStore;
        if (loaded == "1") {
            initMap();
        }
        if (loaded != "1" || mindComing == 1) {//xk:任务台账第一次进入脑图的时候初始化
            init({ id });
        }
        governAnalysisStore.getTaskStatistics({ "taskid": id });

        this.scrollPage();
        jQuery(window).resize(() => {
            this.isMounted && this.scrollPage();
        });

        var _this = this
        jQuery("body").unbind("mousedown").bind("contextmenu", function (e) {
            e.preventDefault();
            var obj;
            if (jQuery(e.target).attr("class") == "DBcard") {
                obj = jQuery(e.target);
            } else {
                obj = $(e.target).parents('.DBcard');
            }
            if (obj.attr("class") == "DBcard") {
                var skey = obj.attr("skey");
                var status = obj.attr("status");
                _this.setRightMenu(skey, status);
            } else {
                _this.clearRightMenu();
            }
        })
    }

    scrollPage = () => {
        this.setState({ winHeight: document.body.offsetHeight, winWidth: document.body.offsetWidth });
    }

    clearRightMenu = () => {
        const { proinfoStore } = this.props;
        proinfoStore.clearRightMenuCur();
    }

    setRightMenu = (skey, status) => {
        const { proinfoStore, governMindStore } = this.props;
        let btns = [];
        proinfoStore.setRightMenuCur({ skey: skey, rc: btns });
    }

    getTooltip = () => {
        const { governAnalysisStore } = this.props;
        const { statistics } = governAnalysisStore;
        let barConfig = statistics;
        let group = barConfig.map(c => {
            return (<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@7sns1c@${c.id}`} placement="bottom" title={c.topic}>
                <div className={c.block ? "ThemeColor3" : ""}>
                    <span class="charBarNum1">{c.content}</span>{c.unit}
                    <span class="block">{c.topic}</span>
                </div>
            </Tooltip>)
        })
        return group;
    }

    render() {
        const { governMindStore, mindComing } = this.props;
        const { loading } = governMindStore;

        let { winWidth, winHeight } = this.state;
        let maxWidth = (winWidth - (30 + 20 + 16) * 2) * 0.96;
        let aheight = mindComing ? winHeight -310-59 : winHeight - 282;
        return (
            <div className="governMind_Container" style={{ height: "100%" }}>
                <div className="governAnalysis" style={{ width: "100%" }}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1gwcs6`} className="governChartBar" justify="center" style={{ padding: "16px", paddingBottom: 88 }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@crc9xf`} xs={14} sm={16} md={18} lg={20} className="governChartBarLeft" style={{ background: "#fff", width: "100%", margin: '0px' }} >{/*lusx 19.3.5 屏幕小时,getTooltip样式问题*/}
                            {this.getTooltip()}
                        </Col>
                    </Row>
                </div>
                <div style={{ height: "0px" }}>
                    <WeaMind ecId={`${this && this.props && this.props.ecId || ''}_WeaMind@a1u9z1`}
                        onCreate={governMindStore.jsmindLoading}
                        style={{ height: "0px" }} />
                </div>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@h6njsi`} spinning={loading} style={{ paddingLeft: "47%", paddingTop: "20%" }} />
                <div className="btnDiv">
                    <ButtonGroup ecId={`${this && this.props && this.props.ecId || ''}_ButtonGroup@dk4j54`} size="large">
                        <ul>
                            <li><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3489go`} type="ghost" onClick={governMindStore.zoomIn}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nzebxc`} type="plus-circle-o" />{getLabel(22208, '放大')}</Button></li>
                            <li><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ztfm3h`} type="ghost" onClick={governMindStore.zoomOut}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@lqc83z`} type="minus-circle-o" />{getLabel(22209, '缩小')}</Button></li>
                            <li><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x20uq6`} type="ghost" onClick={governMindStore.expand_all}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@j6ebpr`} type="circle-o-down" />{getLabel(15315, '展开')}</Button></li>
                            <li><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@619iw6`} type="ghost" onClick={governMindStore.collapse_all}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hnlrnt`} type="circle-o-up" />{getLabel(20721, '收缩')}</Button></li>
                            <li><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0enbh1`} type="ghost" onClick={() => governMindStore.init({ id: governMindStore.params.id })}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@dnohxc`} type="reload" />{getLabel(354, '刷新')}</Button></li>
                        </ul>
                    </ButtonGroup>
                </div>
                <div id="jsmind_container" style={{ height: aheight + "px", marginLeft: '90px' }} />
            </div >
        )
    }

    forwardQueryResult = (key) => {
        const { proinfoStore } = this.props;
        proinfoStore.showModel(key);
    }

    /*forwardQueryResult(key){
        const { governMindStore } = this.props;
        governMindStore.modelType = key;
        governMindStore.handleShareDialog(true)
        governMindStore.modelStore.getProListConditions(key);
        governMindStore.modelStore.form = new WeaForm();
    }*/
}

export default GovernMind;
